<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body style="background: #f7f7f7;">
    <div id="app" v-cloak style="padding:0 0 0;">
        <!-- 头 -->
        <!-- <div style=" box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); display: flex; color: #fff;width: 100%; height: 40px;align-items: center; position: fixed; top: 0; background:#66b3ff;z-index: 1;">
            <div style="flex-shrink: 0; width: 30px;text-align: center;">
            </div>
            <div style="font-size: 14px;width: 100%; margin-right: 30px;text-align: center;">留言板</div>
        </div> -->
        <!-- 筛选条件 -->
        <div style="margin: 10px; color:#343a40; display: flex; justify-content: space-between;">
            <span style="flex-shrink: 0;width: 100px; font-size: 12px;">筛选条件</span>
            <el-dropdown style="width: 100%; text-align: center;" @command="onSerach($event)" trigger="click">
                <span class="el-dropdown-link " style="font-size: 12px;">
                    {{form.Category_SerialNumber!='-'?category.filter(i=>i.Category_SerialNumber==form.Category_SerialNumber)[0].Category_Name:'类型筛选'}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item,index) in category" :key="index" :command="item.Category_SerialNumber">{{item.Category_Name}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span @click="onSerach(false)" style="text-align: right; flex-shrink: 0; width: 100px;font-size: 12px;">回复时间排序<i :class="form.Sort?'el-icon-sort-down':'el-icon-sort-up'"></i></span>
        </div>
        <!-- 内容 -->
        <div v-for="(item,index) in tableData" :key="index" style="margin: 0 5px 5px; background-color: #fff; border-radius: 10px;">
            <div style="padding: 10px;">
                <!-- 人 -->
                <div style="display: flex;position: relative;">
                    <el-image style="flex-shrink: 0; margin-right: 10px; width: 40px;height: 40px;border-radius: 50%; border:1px solid #f7f7f7;" src="../../../admin/icons/NoLogo.png"></el-image>
                    <div style="width: 100%;display: flex;justify-content: center; flex-direction: column;">
                        <span style="font-size: 14px;">{{item.User_Number}}</span>
                        <span style="font-size: 12px; color: #828d96;">回复于{{getYMDHMSDate(item.Operation_Datetime)}}</span>
                    </div>
                    <div style="position: absolute; right: 0;font-size: 12px;color: #828d96;">
                       类型：<span style="color:#67C23A;">{{item.Category_Name}}</span>
                    </div>
                </div>
                <!-- 提问 -->
                <div style="font-size: 14px;margin: 5px 0;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;  -webkit-box-orient: vertical">
                    {{item.Poblem}}
                </div>
                <div v-if="item.Picture_URL" style="display: flex; flex-wrap: wrap; margin: 10px 0;">
                    <el-image v-for="(src,id) in item.Picture_URL.split(';').filter((i,id)=>id<=2)" :style="{marginRight:id!=2?'2%':'0',borderRadius:id==0?'10px 0 0 10px':id==2?'0 10px 10px 0':''}" 
                        style="width: 32%;height: 110px;" :src="Domain_IMG + src"></el-image>
                </div>
                <div @click="handleReply(item)" style="display: flex; justify-content: space-around; margin-top: 10px;">
                    <div style="display: flex; align-items: center;">
                        <i class="el-icon-chat-line-round" style="font-size: 16px;"></i> 
                        <span style="font-size: 12px; margin-left: 5px;">{{item.total?item.total:'回复'}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="font-size: 12px; color: #828d96; text-align: center;line-height: 40px;">暂无更多了...</div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>